<template>
  <div>
    <BasicTable @register="registerTable" @edit-change="handleEditChange" :getDataSource="getDataSource">
      <template #toolbar>
        <a-button type="primary" @click="handleAdd"> 新增字段 </a-button>
      </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" minhight="0" />
      </template>
    </BasicTable>
    <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增字段 </a-button>
  </div>
</template>
<!--<script lang="ts" setup>
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '/@/components/Table';
  import filedType from '/src/json/filedType.json';
  import formType from '/src/json/formType.json';

  const columns: BasicColumn[] = [
    {
      title: '字段名称',
      helpMessage: '表中字段名称，为英文开头，纯小写 多个单词下划线隔开',
      dataIndex: 'name',
      editRow: true,
    },
    {
      title: '字段类型',
      helpMessage: '表中字段储存类型',
      dataIndex: 'type',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: filedType,
        showSearch: true,
      },
    },
    {
      title: '字段长度',
      helpMessage: '表中字段储存类型长度',
      dataIndex: 'type_number',
      editRow: true,
    },
    {
      title: '默认值',
      helpMessage: '表中字段的默认值',
      dataIndex: 'default',
      editRow: true,
      width: 100,
    },
    {
      title: '备注',
      helpMessage: '表中字段备注',
      dataIndex: 'comment',
      editRow: true,
    },
    {
      title: '主键',
      helpMessage: '表中该字段是否为主键',
      dataIndex: 'isKey',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '非空',
      helpMessage: '表中字段是否为必填',
      dataIndex: 'null',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '表单',
      helpMessage: '是否在表单中展示该字段',
      dataIndex: 'formShow',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '表格',
      helpMessage: '是否在表格中展示该字段',
      dataIndex: 'tableShow',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '搜索',
      helpMessage: '是否在表格中搜索该字段',
      dataIndex: 'search',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '搜索方式',
      helpMessage: '是否在表格中搜索该字段',
      dataIndex: 'searchValue',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: '绝对查询',
            value: '=',
          },
          {
            label: '模糊查询',
            value: 'like',
          },
        ],
        size: 'default',
      },
    },
    {
      title: '表单类型',
      helpMessage: '在表单中展示该字段的组件类型 如不在表单中展示则不填',
      dataIndex: 'formType',
      width: 250,
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: formType,
        showSearch: true,
      },
    },
  ];

  const [registerTable, { getDataSource }] = useTable({
    title: '时间字段由系统生成',
    titleHelpMessage: '创建时间：created_at 编辑时间：updated_at 删除时间：deleted_at',
    columns: columns,
    showIndexColumn: false,
    autoCreateKey: false,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    pagination: false,
  });

  function handleEdit(record: EditRecordRow) {
    record.onEdit?.(true);
  }

  function handleCancel(record: EditRecordRow) {
    record.onEdit?.(false);
    if (record.isNew) {
      const data = getDataSource();
      const index = data.findIndex((item) => item.key === record.key);
      data.splice(index, 1);
    }
  }

  function handleSave(record: EditRecordRow) {
    record.onEdit?.(false, true);
  }

  function handleEditChange(data: Recordable) {
    console.log('new data', data);
  }

  function handleAdd() {
    const data = getDataSource();
    const addRow: EditRecordRow = {
      name: '',
      no: '',
      dept: '',
      editable: true,
      isNew: true,
      key: `${Date.now()}`,
    };
    data.push(addRow);
  }

  function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
    if (!record.editable) {
      return [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
        },
        {
          label: '删除',
          popConfirm: {
            title: '是否删除该行？',
            confirm: handleCancel.bind(null, record, column),
          },
        },
        {
          label: '+',
          onClick: handleAdd.bind(null, record),
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record, column),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑并删除该行？',
          confirm: handleCancel.bind(null, record, column),
        },
      },
      {
        label: '+',
        onClick: handleAdd.bind(null, record),
      },
    ];
  }
</script>-->

<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '/@/components/Table';
  import filedType from '/src/json/filedType.json';
  import formType from '/src/json/formType.json';

  const columns: BasicColumn[] = [
    {
      title: '字段名称',
      helpMessage: '表中字段名称，为英文开头，纯小写 多个单词下划线隔开',
      dataIndex: 'name',
      editRow: true,
    },
    {
      title: '字段类型',
      helpMessage: '表中字段储存类型',
      dataIndex: 'type',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: filedType,
        showSearch: true,
      },
    },
    {
      title: '字段长度',
      helpMessage: '表中字段储存类型长度',
      dataIndex: 'type_number',
      editRow: true,
      width: 100,
    },
    {
      title: '默认值',
      helpMessage: '表中字段的默认值',
      dataIndex: 'default',
      editRow: true,
      width: 100,
    },
    {
      title: '备注',
      helpMessage: '表中字段备注',
      dataIndex: 'comment',
      editRow: true,
    },
    // {
    //   title: '主键',
    //   helpMessage: '表中该字段是否为主键',
    //   dataIndex: 'isKey',
    //   width: 80,
    //   editRow: true,
    //   editComponent: 'Switch',
    //   editComponentProps: {
    //     checkedChildren: '是',
    //     unCheckedChildren: '否',
    //     size: 'default',
    //   },
    // },
    {
      title: '非空',
      helpMessage: '表中字段是否为必填',
      dataIndex: 'null',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '表单',
      helpMessage: '是否在表单中展示该字段',
      dataIndex: 'formShow',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '表格',
      helpMessage: '是否在表格中展示该字段',
      dataIndex: 'tableShow',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '搜索',
      helpMessage: '是否在表格中搜索该字段',
      dataIndex: 'search',
      width: 80,
      editRow: true,
      editComponent: 'Switch',
      editComponentProps: {
        checkedChildren: '是',
        unCheckedChildren: '否',
        size: 'default',
      },
    },
    {
      title: '搜索方式',
      helpMessage: '是否在表格中搜索该字段',
      dataIndex: 'searchValue',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: '绝对查询',
            value: '=',
          },
          {
            label: '模糊查询',
            value: 'like',
          },
        ],
        size: 'default',
      },
    },
    {
      title: '表单类型',
      helpMessage: '在表单中展示该字段的组件类型 如不在表单中展示则不填',
      dataIndex: 'formType',
      width: 250,
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: formType,
        showSearch: true,
      },
    },
  ];

  export default defineComponent({
    components: { BasicTable, TableAction },
    setup() {
      const [registerTable, { getDataSource }] = useTable({
        title: '时间字段由系统生成',
        titleHelpMessage: '创建时间：created_at 编辑时间：updated_at 删除时间：deleted_at',
        columns: columns,
        showIndexColumn: false,
        autoCreateKey: false,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        pagination: false,
      });

      function handleEdit(record: EditRecordRow) {
        record.onEdit?.(true);
      }

      function handleCancel(record: EditRecordRow) {
        record.onEdit?.(false);
        if (record.isNew) {
          const data = getDataSource();
          const index = data.findIndex((item) => item.key === record.key);
          data.splice(index, 1);
        }
      }

      function handleSave(record: EditRecordRow) {
        record.onEdit?.(false, true);
      }

      function handleEditChange(data: Recordable) {
        console.log(data);
      }

      function handleAdd() {
        const data = getDataSource();
        const addRow: EditRecordRow = {
          name: '',
          no: '',
          dept: '',
          editable: true,
          isNew: true,
          key: `${Date.now()}`,
        };
        data.push(addRow);
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          return [
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              popConfirm: {
                title: '是否删除该行？',
                confirm: handleCancel.bind(null, record, column),
              },
            },
            {
              label: '+',
              onClick: handleAdd.bind(null, record),
            },
          ];
        }
        return [
          {
            label: '保存',
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: '取消',
            popConfirm: {
              title: '是否取消编辑并删除该行？',
              confirm: handleCancel.bind(null, record, column),
            },
          },
          {
            label: '+',
            onClick: handleAdd.bind(null, record),
          },
        ];
      }

      return {
        registerTable,
        handleEdit,
        createActions,
        handleAdd,
        getDataSource,
        handleEditChange,
      };
    },
  });
</script>
